<template>
    <div class="p-6 bg-gray-50 min-h-screen">
        <el-card class="!border-none rounded-lg shadow-sm mb-4" shadow="never">
            <el-page-header content="园参种植主体信息详情" @back="$router.back()" class="text-lg font-medium text-gray-800" />
        </el-card>
        <el-card class="mt-4 !border-none rounded-lg shadow-md p-8 bg-white" header="园参种植主体基本信息">
            <el-descriptions :column="3" border>
                <!-- 提交人手机号 -->
                <el-descriptions-item label="提交人手机号：" label-align="right" align="left" width="150px">
                    <span>{{ formData.user_account || '-' }}</span>
                </el-descriptions-item>

                <!-- 主体名称 -->
                <el-descriptions-item label="主体名称：" label-align="right" align="left" width="150px">
                    <span>{{ formData.entity_name || '-' }}</span>
                </el-descriptions-item>

                <!-- 统一社会信用代码 -->
                <el-descriptions-item label="统一社会信用代码：" label-align="right" align="left" width="150px">
                    <span>{{ formData.credit_code || '-' }}</span>
                </el-descriptions-item>

                <!-- 成立日期 -->
                <el-descriptions-item label="成立日期：" label-align="right" align="left" width="150px">
                    <span>{{ formData.start_date || '-' }}</span>
                </el-descriptions-item>

                <!-- 法定代表人姓名 -->
                <el-descriptions-item label="法定代表人姓名：" label-align="right" align="left" width="150px">
                    <span>{{ formData.oper_name || '-' }}</span>
                </el-descriptions-item>

                <!-- 状态 -->
                <el-descriptions-item label="状态：" label-align="right" align="left" width="150px">
                    <span>{{ formData.status || '-' }}</span>
                </el-descriptions-item>

                <!-- 注册号 -->
                <el-descriptions-item label="注册号：" label-align="right" align="left" width="150px">
                    <span>{{ formData.no || '-' }}</span>
                </el-descriptions-item>

                <!-- 注册地址 -->
                <el-descriptions-item label="地址：" label-align="right" align="left" width="150px">
                    <span>{{ formData.comp_address || '-' }}</span>
                </el-descriptions-item>

                <!-- 类型 -->
                <el-descriptions-item label="类型：" label-align="right" align="left" width="150px">
                    <span>{{ formData.type_info || '-' }}</span>
                </el-descriptions-item>

                <!-- 登记时间 -->
                <el-descriptions-item label="登记时间：" label-align="right" align="left" width="150px" :span="3">
                    {{ formData.registration_time || '-' }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-card class="mt-4 !border-none rounded-lg shadow-md p-8 bg-white" header="园参种植地点信息">
            <el-descriptions :column="3" border>
                <!-- 种植地点 -->
                <el-descriptions-item label="种植地点：" label-align="right" align="left" width="150px">
                    <span>{{ formData.address || '-' }}</span>
                </el-descriptions-item>

                <!-- 用地方式 -->
                <el-descriptions-item label="用地方式：" label-align="right" align="left" width="150px">
                    <span>{{ formData.address_type || '-' }}</span>
                </el-descriptions-item>
                <!-- 经纬度 -->
                <el-descriptions-item label="经纬度：" label-align="right" align="left" width="150px">
                    <span>{{ `${formData.longitude || '-'}，${formData.latitude || '-'}` }}</span>
                </el-descriptions-item>

                <!-- 所在位置 -->
                <el-descriptions-item label="所在位置" label-align="right" align="left" width="150px">
                    <span>{{ formData.location || '-' }}</span>
                </el-descriptions-item>

                <!-- 种植品种 -->
                <el-descriptions-item label="种植品种：" label-align="right" align="left" width="150px">
                    <span>{{ formData.variety || '-' }}</span>
                </el-descriptions-item>

                <!-- 品种来源 -->
                <el-descriptions-item label="品种来源：" label-align="right" align="left" width="150px">
                    <span>{{ formData.variety_source || '-' }}</span>
                </el-descriptions-item>

                <!-- 基地名称
                <el-descriptions-item label="基地名称：" label-align="right" align="left" width="150px">
                    <span>{{ formData.field_name || '-' }}</span>
                </el-descriptions-item> -->

                <!-- 种植面积 -->
                <el-descriptions-item label="种植面积：" label-align="right" align="left" width="150px">
                    <span>{{ formData.planting_area || '-' }}</span>
                </el-descriptions-item>

                <!-- 种植时间 -->
                <el-descriptions-item label="种植时间：" label-align="right" align="left" width="150px">
                    <span>{{ formData.planting_date || '-' }}</span>
                </el-descriptions-item>

                <!-- 采收面积(亩) -->
                <el-descriptions-item label="采收面积(亩)：" label-align="right" align="left" width="150px">
                    <span>{{ formData.actual_production_area || '-' }}</span>
                </el-descriptions-item>

                <!-- 采收量(公斤) -->
                <el-descriptions-item label="采收量(公斤)：" label-align="right" align="left" width="150px">
                    <span>{{ formData.actual_production_volume || '-' }}</span>
                </el-descriptions-item>
                <!-- 预计作货时间 -->
                <el-descriptions-item label="预计作货时间：" label-align="right" align="left" width="150px">
                    <span>{{ formData.estimated_harvest_date || '-' }}</span>
                </el-descriptions-item>

                <!-- 播种方式 -->
                <el-descriptions-item label="播种方式：" label-align="right" align="left" width="150px">
                    <span>{{ formData.sowing_method || '-' }}</span>
                </el-descriptions-item>

                <!-- 预计作货量 -->
                <el-descriptions-item label="预计作货量：" label-align="right" align="left" width="150px">
                    <span>{{ formData.estimated_yield || '-' }}</span>
                </el-descriptions-item>

                <!-- 实际做货面积(亩) -->
                <el-descriptions-item label="实际做货面积(亩)：" label-align="right" align="left" width="150px">
                    <span>{{ formData.actual_production_area || '-' }}</span>
                </el-descriptions-item>

                <!-- 实际做货量(公斤) -->
                <el-descriptions-item label="实际做货量(公斤)：" label-align="right" align="left" width="150px" :span="3">
                    <span>{{ formData.actual_production_volume || '-' }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="检测报告图片：" label-align="right" align="left" :span="3">
                    <div v-if="formData.report_images" class="flex flex-wrap items-center">
                        <el-image
                            v-for="(image, index) in Array.isArray(formData.report_images) ? formData.report_images : formData.report_images.split(',')"
                            :key="index" :src="getImageUrl(image)" fit="cover"
                            class="w-20 h-20 rounded-lg object-cover mr-4 cursor-pointer hover:opacity-80 transition-opacity hover:scale-105 transition-transform shadow-sm"
                            @click="openImageGallery(getImageArray(formData.report_images), index)" />
                    </div>
                    <span v-else class="text-red-500 text-base font-semibold">无图片</span>
                </el-descriptions-item>
                <!-- 修改为单独一行 -->
                <el-descriptions-item label="种植环境照片：" label-align="right" align="left" :span="3">
                    <div v-if="formData.environment_images" class="flex flex-wrap items-center">
                        <el-image
                            v-for="(image, index) in Array.isArray(formData.environment_images) ? formData.environment_images : formData.environment_images.split(',')"
                            :key="index" :src="getImageUrl(image)" fit="cover"
                            class="w-20 h-20 rounded-lg object-cover mr-4 cursor-pointer hover:opacity-80 transition-opacity hover:scale-105 transition-transform shadow-sm"
                            @click="openImageGallery(getImageArray(formData.environment_images), index)" />
                    </div>
                    <span v-else class="text-red-500 text-base font-semibold">无图片</span>
                </el-descriptions-item>

                <!-- 提交时间 -->
                <el-descriptions-item label="提交时间：" label-align="right" align="left" width="150px">
                    <span>{{ formData.create_time || '-' }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-dialog v-model="dialogVisible" :title="'图片查看'" width="80%" class="rounded-lg overflow-hidden shadow-xl">
            <el-carousel v-if="imageList.length" v-model="currentImageIndex" arrow="always" class="h-96 bg-gray-100">
                <el-carousel-item v-for="(image, index) in imageList" :key="index">
                    <el-image :src="image" fit="contain" class="w-full h-full flex items-center justify-center" />
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="consumerDetail">
import { ref, reactive, shallowRef } from 'vue'
import type { FormInstance } from 'element-plus'
import { useRoute } from 'vue-router'
import config from '@/config'
import { plantingAdjustMoney, getPlantingDetail, plantingEdit, getPlantingQrcodeLists } from '@/api/Planting'
import { isEmpty } from '@/utils/util'
import AccountAdjust from '../components/account-adjust.vue'

const route = useRoute()
const formData = reactive({
    location: '',
    production_area: '',
    production_weight: '',
    sowing_method: '',
    registration_time: '',
    user_account: '',
    entity_name: '',
    credit_code: '',
    start_date: '',
    oper_name: '',
    status: '',
    no: '',
    comp_address: '',
    type_info: '',
    address: '',
    address_type: '',
    longitude: '',
    latitude: '',
    variety: '',
    variety_source: '',
    planting_area: '',
    planting_date: '',
    estimated_harvest_date: '',
    estimated_yield: '',
    actual_production_area: '',
    actual_production_volume: '',
    field_name: '',
    report_images: '',
    environment_images: '',
    create_time: ''
})

const adjustState = reactive({
    show: false,
    value: ''
})
const formRef = shallowRef<FormInstance>()
// 弹窗是否显示
const dialogVisible = ref(false)
// 当前图片列表
const imageList = ref<string[]>([])
// 当前图片索引
const currentImageIndex = ref(0)

// 将图片数据转换为数组
const getImageArray = (images: string | string[]) => {
    return Array.isArray(images) ? images : images.split(',').map(img => img.trim())
}

// 获取完整的图片 URL
const getImageUrl = (image: string) => {
    return config.baseUrl + image
}

// 打开图片浏览工具
const openImageGallery = (images: string[], index: number) => {
    imageList.value = images.map(getImageUrl)
    currentImageIndex.value = index
    dialogVisible.value = true
}

// 加载详情数据
const getDetails = async () => {
    try {
        const data = await getPlantingDetail({
            id: route.query.id
        })
        Object.keys(formData).forEach((key) => {
            //@ts-ignore
            formData[key] = data[key] || ''
        })
    } catch (error) {
        console.error('获取详情数据失败:', error)
    }
}

const handleEdit = async (value: string, field: string) => {
    if (isEmpty(value)) return
    try {
        await plantingEdit({
            id: route.query.id,
            field,
            value
        })
        getDetails()
    } catch (error) {
        console.error('编辑数据失败:', error)
    }
}

const handleAdjust = (value: string) => {
    adjustState.show = true
    adjustState.value = value
}

const handleConfirmAdjust = async (value: any) => {
    try {
        await plantingAdjustMoney({ user_id: route.query.id, ...value })
        adjustState.show = false
        getDetails()
    } catch (error) {
        console.error('调整金额失败:', error)
    }
}

getDetails()
</script>

<style scoped>
:deep(.my-label) {
    background: var(--el-color-success-light-9) !important;
}

:deep(.my-content) {
    background: var(--el-color-danger-light-9);
}

:deep(.el-card__header) {
    border-bottom: 2px solid #000 !important;
}
</style>
